<template>
    <div>
        <h1 ref="h1">我是todoList</h1>
        <ul>
            <li ref="li" v-for="(todo, index) in todoList" :key="todo.id">{{ todo.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts">
//在修改数据之后立即使用这个方法，获取更新后的 DOM。
import { ref, onMounted, watch, nextTick } from 'vue';
const todoList: any = ref([]);
//同名的ref对象
const h1 = ref();
const li = ref();
onMounted(() => {
    //模拟发请求
    setTimeout(() => {
        //模拟响应式数据发生变化,服务器数据赋值给咱们ref对象
        todoList.value = [{ id: 1, title: '吃饭', done: false }, { id: 2, title: '睡觉', done: false }, { id: 3, title: '打豆豆', done: false }]
    }, 2000);
});


//监听todoList变化
//watch只能保证响应式发生变化,但是不能保证渲染DOM结束啊!!!!;
watch(todoList, () => {
    nextTick(()=>{
        li.value.forEach((item:any)=>{
            item.style.color = 'red';
        })
    })
})
</script>

<style scoped></style>